<template>
  <van-nav-bar
      title="404"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <div class="not-found-container">
    <img src="@/assets/images/404.png" alt="404 Image" class="not-found-image"/>
    <h1 class="not-found-title">页面不见了</h1>
    <p class="not-found-text">您找的页面不见了，请重新尝试！</p>
    <router-link to="/" class="back-home-link">回到首页</router-link>
  </div>
</template>

<script setup lang='ts' name="test">
import {useStore} from "vuex";

const store = useStore();
const onClickLeft = () => history.back();
console.log(store);
</script>

<style lang="less" scoped>
.not-found-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
}

.not-found-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.not-found-title {
  font-size: 1em;
  margin-bottom: 10px;
}

.not-found-text {
  font-size: 0.6em;
  color: #777;
  margin-bottom: 30px;
}

.back-home-link {
  text-decoration: none;
  color: #3498db;
  font-weight: bold;
  font-size: 0.8em;
  transition: color 0.3s;
}

.back-home-link:hover {
  color: #2c3e50;
}
</style>
